<template>
	<el-dialog :title="titleShow" :visible.sync="vm.dialogFormVisible" @open="openHandle()" @close="closeHandle()">
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item label="角色名称" :label-width="formLabelWidth" prop="rname">
				<el-input v-model="form.rname" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="角色权限" :label-width="formLabelWidth" prop="authids">
				<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
				<div style="margin: 15px 0;"></div>
				<el-checkbox-group v-model="form.authids" @change="handleCheckedChange">
					<el-checkbox v-for="auth in vm.auths" :label="auth.label" :key="auth.value">{{auth.label}}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="vm.dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="handle()" :loading="loading">{{this.vm.isAdd?'添加':'修改'}}</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default ({
		props: ['vm'],
		data() {
			return {
				form: {
					rname: '',
					authids: []
				},
				formLabelWidth: '150px',
				loading: false,
				rules: {
					rname: [{
						required: true,
						message: '角色名称不能为空',
						trigger: 'change'
					}]
				},
				checkAll: false,
				isIndeterminate: false
			}
		},
		methods: {
			openHandle() {
				if (!this.vm.isAdd) {
					this.axios({
						method: 'post',
						url: 'http://localhost:8080/role/find',
						data: {
							roleid: this.vm.selRoleid
						},
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						}
					}).then((response) => {
						if (response.data) {
							this.form.rname = response.data.rname
							this.form.authids = response.data.authids?this.idsArrFormateToNames(response.data.authids) : []
							var isAll = this.form.authids.length == this.vm.auths.length? true : false
							this.checkAll = isAll?  true : false
							this.isIndeterminate = this.form.authids.length>0 && !isAll? true : false
						}
					})
				}
			},
			closeHandle() {
				this.$refs.form.resetFields()
			},
			handle() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.loading = true
						if (this.vm.isAdd) {
							this.add()
						} else {
							this.update()
						}
					}
				})
			},
			add() {
				this.axios({
					method: 'post',
					url: 'http://localhost:8080/role/add',
					data: {
						...this.form,
						authids: this.checkedsArrFormateToIds()
					},
					headers: {
						'Content-Type': 'application/json;charset=utf-8'
					}
				}).then((response) => {
					if (response.data && response.data.code === 1000) {
						this.$message.success('添加成功')
					} else {
						this.$message.error('添加失败')
					}
					this.vm.fetchData()
					this.vm.dialogFormVisible = false
					this.loading = false
				}).catch((err) => {
					this.$message.error('添加失败')
					this.vm.fetchData()
					this.vm.dialogFormVisible = false
					this.loading = false
				})
			},
			update() {
				this.axios({
					method: 'post',
					url: 'http://localhost:8080/role/update',
					data: {
						...this.form,
						authids: this.checkedsArrFormateToIds(),
						roleid: this.vm.selRoleid
					},
					headers: {
						'Content-Type': 'application/json;charset=utf-8'
					}
				}).then((response) => {
					if (response.data && response.data.code === 1000) {
						this.$message.success('修改成功')
					} else {
						this.$message.error('修改失败')
					}
					this.vm.fetchData()
					this.vm.dialogFormVisible = false
					this.loading = false
				}).catch((err) => {
					this.$message.error('修改失败')
					this.vm.fetchData()
					this.vm.dialogFormVisible = false
					this.loading = false
				})
			},
			handleCheckAllChange(val) {
				this.form.authids = val ? this.vm.auths : [];
				this.isIndeterminate = false;
			},
			handleCheckedChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.vm.auths.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.vm.auths.length;
			},
			checkedsArrFormateToIds(){
				//对authids由组件给出的名称数组转换成id数组
				return this.form.authids.map(item => {
					var res = this.vm.auths.find(auth => auth.label == item)
					return res?res.value:null
				})
			},
			idsArrFormateToNames(nameArr){
				//对authids由组件给出的名称数组转换成id数组
				return nameArr.map(item => {
					var res = this.vm.auths.find(auth => auth.value == item)
					return res?res.label:'id:'+item+'(未知权限)'
				})
			}
		},
		computed: {
			titleShow() {
				return this.vm.isAdd ? '添加角色' : '修改角色'
			}
		},

	})
</script>
